<template>
    <view class="hpaint">
        <!-- <view class="flex-2">
        <view class="first block1">
      
        </view>
       
    </view> -->
   
    <!-- 第一步 -->
    <view class="first-blo" v-if="activeIdx==0">
        <view style="display: flex;justify-content: space-between;align-items: center;">
          
                <view class="title" style="margin-top: 0px;">
                    <view class="gradient">第一步</view>
                     <view class="val">请上传参考图（必填）</view>
                </view>
                <view class="gradient">{{ count+unit }}</view>
           
           
        </view>
    
        <view class="blo dash" style="padding: 0;">
            <Upload type="custom" :imgUrl="src" @getImg="val=>src=val">
                <view class="upd" :style="{
                    width:'calc('+screenWidth+'px - 28px)'
                }">
                    <view class="center" v-if="!src">
                    <uni-icons style="margin-top: 20px;" type="plus-filled" size="50" color="#fff"></uni-icons>
    
                    <view class="text">点击上传图片</view>
                    <view class="text1">支持图片格式：JPG,PNG, Max:10MB</view>
                </view>
                <image class="image" mode="heightFix" v-else :src="src"></image>
                   
                </view>
               
    
                
            </Upload>
                    
        </view>
    
    </view>
    <view class="first-blo" v-else>
        <view class="title">
            <view class="gradient">第一步</view>
            <view class="val">
                
                
    
                输入描述词</view>
        </view>
    
        <view class="blo">
            <textarea :maxlength="-1" auto-height class="index-inp-inner" :placeholder-style="{
                    color:'#666',
                    fontSize:'12px'
                  }" placeholder="..." 
                                confirm-type="send" style="min-height: 100px;font-size: 30rpx;width:100%" 
                                cursor-spacing="40" @confirm="sendMessage" 
                             @input="isExceed"
                                ref="inputRef" v-model="inputcontent" /> 
                <view class="flex-2 grey">
                    <view @tap="getData"><uni-icons color="#999" type="loop" size="16" style="margin-right: 4px;"></uni-icons>随机输入</view>
                    <view><text>{{inputcontent.length}}/{{ textTotal }} ｜</text>
                        <text @tap="clear" class="green">清空</text>
                    </view>
                </view>
        </view>
    
    </view>
    
    <!-- 第二步 -->
    <view class="first-blo second">
        <view class="title">
            <view class="gradient">第二步</view>
            <view class="val">选择背景 (不选择则随机背景)</view>
        </view>
    
        <scroll-view scroll-x scroll-with-animation  @scrolltolower="goRight">
            <view class="flex-l">
            <view @tap="activeId=item.background_id" :style="{
                border:activeId==item.background_id?'1px solid #7CD887':'none',
              
                    width:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 )',
                    height:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 )',
                
            }" class="posi1" v-for="(item,index) in styles1">
    
                <image class="img" :style="{
                    width:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 - 2px)',
                    height:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 - 2px)',
                }" :src="item.thumbnail"></image>
                <view class="mask" :style="{
                    width:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 - 2px)',
                    height:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 - 2px)',
                }"></view>
                <view class="title2">{{ item.name }}</view>
                <text class="vip" v-if="item.vip_status">VIP</text>
                
            </view>
            </view>
            <view class="flex-l">
            <view @tap="activeId=item.background_id" :style="{
                border:activeId==item.background_id?'1px solid #7CD887':'none',
    
                width:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 )',
                    height:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 )',
            }" class="posi1" v-for="(item,index) in styles2">
    
                <image class="img" :style="{
                    width:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 - 2px)',
                    height:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 - 2px)',
                }" :src="item.thumbnail"></image>
                 <view class="mask" :style="{
                    width:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 - 2px)',
                    height:'calc(('+ screenWidth + 'px - 28px - 14px * 1) /2 - 2px)',
                }"></view>
                <view class="title2">{{ item.name }}</view>
                <text class="vip" v-if="item.vip_status">VIP</text>
                
            </view>
        </view>
            
        </scroll-view>
    </view>
    
    
    <!-- 第三步 -->
    <view class="first-blo second third">
        <view class="title">
            <view class="gradient">第三步</view>
            <view class="val">请输入生成数量(1-10)</view>
        </view>
    
        <u-number-box style="margin:10px 70px" size="30" v-model="genSize" :min="1"  :max="10" bg-color="#999"></u-number-box>
        <!-- <scroll-view class="" scroll-x scroll-with-animation>
            <view class="flex-l">
            <view @tap="sizeId=item.size" :style="{
                width:'calc(('+screenWidth+'px - 28px - 14px * 4) / 4 )',
                height:'calc(('+screenWidth+'px - 28px - 14px * 4) / 4 )',
                border:sizeId==item.size?'1px solid #7CD887':'none'
            }" class="blo" v-for="(item,index) in sizes">
    
               <view class="size">{{ item.size }}</view>
                <view class="title3">{{ item.name }}</view>
           
            </view>
        </view>
    
    
            
        </scroll-view> -->
    </view>
    
    <ZWait tip="在我的" ref="zwait"></ZWait>
    
    </view>
    
    </template>
     
    <script>
     
    let s;
    import {debounce} from '@/utils'
    import ZWait from '@/components/z-wait/z-wait'
    import Upload from '@/components/upload/upload'
    export default {
        props: {},
        components:{ ZWait,Upload },
        emits:['changeTabbar'],
        data() {
            return {
    
                genSize:1,
                count:'',
                unit: "条",
                cost: "",
                activeIdx: 0,
                inputcontent: "",
                styles1: [],
                styles2: [],
                sizes: [],
                activeId: "",
                sizeId: "",
                src:'',
                screenWidth:0,
                timer:null,
                msgId:'',
                textTotal:500,
                page:1,
                total:0,
    
                size:4,
            };
        },
        async created() {
            s = this;
            s.unit = uni.getStorageSync('unit')
            this.screenWidth = uni.getStorageSync('screenWidth')
    
            s.getStyle();
           
            s.getData1()
        },
        beforeDestroy(){
            clearInterval(this.timer)
            this.timer = null
        },
        methods: {
            goRight(){
                
                if(Math.ceil(this.total/this.size)>this.page){
                    this.page++
                    this.getStyle()
                }
               
                console.log('ccccc')
            },
            isExceed(){
                if(this.inputcontent.length>this.textTotal){
                    this.inputcontent.slice(0,this.textTotal)
                    this.$u.toast('字数不能超过'+this.textTotal)
                }
            },
            async getData1(){
                    const r = await this.$u.api.userInfo()
                    if(r){
                        this.count = r.data.residue_degree 
                    }
                },
            async send(){
                clearInterval(this.timer)
                this.timer = null
                debounce(()=>{
                    s.send1()
                })
            },
            async 'getResult'(){
                const r = await s.$u.api.bpaintResult(
                    {
                        id:s.msgId
                    }
                )
                if(r){  
                    if(r.msg!='图片生成中..'){
                        clearInterval(s.timer)
                        s.timer = null
                        s.$refs['zwait'].show(false)
                        s.$emit('changeTabbar',3)
                    }
                    
                }
            },
            async send1() {
                const r = await s.$u.api.bpaintSend(
                    {
                        image:s.src,
                        background_id:s.activeId,
                        size:s.genSize
                    }
                )
                if(r){  
                    s.msgId = r.data.msgid
    
                    this.timer = setInterval(()=>{
                        s.getResult()
                    },4000)
                    s.$refs['zwait'].show(true)
                }
    
                
            },
            async getStyle() {
                const r = await s.$u.api.bpaintBackgrounds({
                    size:this.size,
                    page:this.page,
                });
                if (r) {
                    this.total = r.data.count
                    if (r.data.item.length == 4) {
                        let num = Math.ceil(r.data.item.length / 2);
                        for (let i = 0; i < r.data.item.length; i++) {
                            if (i < num) {
                                s.styles1.push(r.data.item[i]);
                            }
                            else {
                                s.styles2.push(r.data.item[i]);
                            }
                        }
                    }
                    else {
                        s.styles1 = r.data.item;
                    }
                    if (r.data.item.length > 0) {
                        this.activeId = r.data.item[0].background_id;
                    }
                }
            },
            chooseTab(idx) {
                s.activeIdx = idx;
            },
            clear() {
                s.inputcontent = "";
            }
        },
    }
    </script>
    <style scoped lang="scss">
    .hpaint{
        position: relative;
        padding:0 14px;
        color: #fff;
        .first{
        display: flex;
        justify-content: flex-start;
        align-items: space-between;
    }
    .img1{
        width: 40rpx;
        height: 40rpx;
        margin-top: 4px;
    }
    .block1{
            white-space: nowrap;
            overflow-x: auto;
            // margin:50rpx  0  30rpx;
    
            .blo7{
                display: inline-flex;
                color: #fff;
                font-size: 38rpx;
                padding-bottom: 12rpx;
                margin-left: 30rpx;
                margin-right: 30rpx;
            }
            .active{
                color: rgb(124, 216, 135);
                font-weight: 500;
                border-bottom: 6rpx solid rgb(124, 216, 135);
            }
            
        }
        .flex-2{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .gradient{
            padding: 3px 10px;
            color: #fff;
            border-radius: 30px;
            background: linear-gradient(to right, #7CD887,#75CCD1);
        }
        .first-blo{
            .title{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-top: 20px;
            }
            .val{
                font-size: 24rpx;
                margin-left: 10px;
            }
            .blo{
                margin-top: 20px;
                background: #2C2C3D;
                border-radius: 10px;
                padding: 12px;
            }
    
        }
        .green{
            color:#7CD887;
        
        }
        .grey{
            margin-top: 16px;
            color:#999;
        }
        .second{
            .img{
               
                border-radius: 10px;
               
            }
            .mask{
            position:absolute;
            top:0;
            border-radius: 10px;
               background: rgba(0,0,0,.3);
              
           }
            .posi1{
                position: relative;
                border-radius: 10px;
                margin-top: 14px;
                margin-right: 14px;
               
               
            }
            .title2{
                position: absolute;
                bottom: 4px;
                display: flex;
                width: 100%;
                justify-content: center;
                overflow: hidden;
                font-size: 12px;
                
            }
            .vip{
                position: absolute;
                top: 4px;
                right: 4px;
                padding: 0px 2px;
            color: #fff;
            font-size: 12px;
            border-radius: 4px;
            background: linear-gradient(to right, #7CD887,#75CCD1);
        
       
            }
        }
    
        .third{
            .blo{
               
               display: inline-block;
                position: relative;
                border-radius: 10px;
                margin-top: 14px;
                margin-right: 14px;
                
               
               
                .size{
                    
                    text-align: center;
                    font-size: 12px;
                }
                .title3{
                    margin-top: 10px;
                    text-align: center;
                    font-size: 12px;
                }
            }
        }
        .flex-l{
            display: inline-flex;
            white-space: nowrap;
        }
    
        .dash{
            border: 1px dashed #999;
        }   
        
        .upd{
            
            height: 160px;
            .image{
                width: 100%;
                height: 160px;
            }
           
            .center{
                display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            }
           
    
           .text{
            margin-top: 4px;
            color: 14px;
    
           }
           .text1{
            font-size: 12px;
            margin-top: 2px;
            color: #999;
            margin-bottom: 30px;
           }
        }
       
        
    
    }
    
    </style>
     